<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<table id="cartTable">
    <thead>
        <tr>
            <th><label ><input class="ckAll" type="checkbox" onclick="checkall()"></label>全选</th>
            <th style="background-color:#FF0033">商品</th>
            <th>单价</th>
            <th>数量</th>
            <th>小计</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <tr class="inline">
            <td class="checkbox"><input class="check-one check" name="ck" onclick="check()" type="checkbox"/></td>
            <td class="goods"><img src="images/1.jpg" alt=""/><span>Casio/卡西欧 EX-TR350</span></td>
            <td class="price">5999.88</td>
            <td class="count">
                <span class="reduce" onclick="reduceCount(this)">-</span>
                <input class="count-input" type="text" value="1"/>
                <span class="add" onclick="addCount(this)">+</span></td>
            <td class="subtotal">5999.88</td>
            <td class="operation"><span class="delete" onclick="del(this)">删除</span></td>
        </tr>
        <tr class="inline">
            <td class="checkbox"><input class="check-one check" name="ck" onclick="check()" type="checkbox"/></td>
            <td class="goods"><img src="images/2.jpg" alt=""/><span>Canon/佳能 PowerShot SX50 HS</span></td>
            <td class="price">3888.50</td>
            <td class="count"><span class="reduce" onclick="reduceCount(this)">-</span><input class="count-input" type="text" value="1"/><span class="add" onclick="addCount(this)">+</span></td>
            <td class="subtotal">3888.50</td>
            <td class="operation"><span class="delete" onclick="del(this)">删除</span></td>
        </tr>
        <tr class="inline">
            <td class="checkbox"><input class="check-one check" name="ck" onclick="check()" type="checkbox"/></td>
            <td class="goods"><img src="images/3.jpg" alt=""/><span>Sony/索尼 DSC-WX300</span></td>
            <td class="price">1428.50</td>
            <td class="count"><span class="reduce" onclick="reduceCount(this)">-</span><input class="count-input" type="text" value="1"/><span class="add" onclick="addCount(this)">+</span></td>
            <td class="subtotal">1428.50</td>
            <td class="operation"><span class="delete" onclick="del(this)">删除</span></td>
        </tr>
        <tr class="inline">
            <td class="checkbox"><input class="check-one check" name="ck" onclick="check()" type="checkbox"/></td>
            <td class="goods"><img src="images/4.jpg" alt=""/><span>Fujifilm/富士 instax mini 25</span></td>
            <td class="price">640.60</td>
            <td class="count"><span class="reduce" onclick="reduceCount(this)">-</span><input class="count-input" type="text" value="1"/><span class="add" onclick="addCount(this)">+</span></td>
            <td class="subtotal">640.60</td>
            <td class="operation"><span class="delete" onclick="del(this)">删除</span></td>
        </tr>
    </tbody>
</table>

<div class="foot" id="foot">
    <label class="fl select-all"><input type="checkbox" class="ckAll-cheak" "/>&nbsp;全选</label>
    <a class="fl delete" id="deleteAll" href="javascript:;" <span  onclick="del()"></span>删除</a>
    <div class="fr closing">结 算</div>
    <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
    <div class="fr selected" id="selected">已选商品
        <span id="selectedTotal">0</span>件
        <span class="arrow up">︽</span>
        <span class="arrow down">︾</span>
    </div>
    <div class="selected-view">
        <div id="selectedViewList" class="clearfix">
            <!-- <div><img src="images/1.jpg"><span>取消选择</span></div> -->
        </div>
        <span class="arrow">◆<span>◆</span></span>
    </div>
</div>
<script>
//获取元素
var ckAll = document.getElementsByClassName("ckAll");
 var cks = document.getElementsByName('ck');
var trs = document.getElementsByClassName('inline');
var countInput = document.getElementsByClassName('count-input');
var allCount = document.getElementById("selectedTotal");
var allPrice = document.getElementById("priceTotal");
  //计算小计

  function sumCount(){
      var sum = 0;
      for(var i=0;i<cks.length;i++){
           if(cks[i].checked == true){
              var num = Number(countInput[i].value);
              sum += num;
         
     }
     		  }
   allCount.innerHTML = sum;
   
	  
  }
  
  //计算总价
  function sumPrice(){
      var sum = 0;
      for(var i=0;i<cks.length;i++){
          if(cks[i].checked == true){
              var p = Number(trs[i].children[4].innerHTML);
              sum += p;
			 
          }
      }
  allPrice.innerHTML = sum.toFixed(2);
  }
  
  //计算每一行的总价
  function inlinePrice(){
      for(var i=0;i<trs.length;i++){
          //获取每一行单价
          var price = Number(trs[i].children[2].innerHTML);
          //获取数量
          var num = Number(trs[i].children[3].children[1].value);
          //小计
          trs[i].children[4].innerHTML = (price * num).toFixed(2);
  
      }
  }
  
  //数量增加
  function addCount(e){
      // 获取input标签里的value值,数量
      var num =parseInt(e.previousElementSibling.value) ;
      //数量加1
      e.previousElementSibling.value = num+1;
      inlinePrice();
      sumPrice();
      sumCount();
  }
  
  //数量递减
  function reduceCount(e){
      var num = parseInt(e.nextElementSibling.value);
      if(num <= 0){
          alert("不能再减了");
          return;
      }
  
      e.nextElementSibling.value = num-1;
      inlinePrice();
      sumPrice();
      sumCount();
  }
         
  //全选和反选
  function checkall(){
      for(var i=0;i<cks.length;i++){
		  cks[i].checked = ckAll[0].checked
      }
      sumPrice();
      sumCount();
	  inlinePrice();
  }
  //复选框的交互
  function check(){
      // 判断四个小的复选框有没有没被选中的,如果有一个,就把ckAllde的checked 变为false
      for(var i=0;i<cks.length;i++){
         if(cks[i].checked == false){
             ckAll.checked = false;
             sumPrice();
             sumCount();
              // 有一个小复选框为false,就不需要对其他复选框进行判断了,直接中止函数下面的执行语句
              return;
          }
      }
      //循环结束后,如果小复选框checked的值都为true,ckAll的checked的值就为true
       ckAll.checked = true;
      sumPrice();
      sumCount();
  }
  
  //单行删除
  function del(e){
      e.parentElement.parentElement.remove();
      sumPrice();
      sumCount();
  }
</script>

</body>

</html>